<template>
	<el-container class="bg-page">
		<el-header>
			<el-row :gutter="24" class="card_block" style="display: flex; align-items: center;">
				<el-col :span="4">
					<img src="../../../static/img/icon.jpeg" style="height: 60px;border-radius: 50%">
				</el-col>
				<el-col :span="10" style="text-align: left;">
					<h2>{{user.name}}</h2>
				</el-col>
			</el-row>
		</el-header>
		<el-main>

			<el-row :gutter="24" class="card_block">
				<el-col :span="24 / statistics_dates.length" v-for="item in statistics_dates">
					<div>
						<el-row>
							<h2>
								{{ item.value }}
							</h2>
						</el-row>
						<el-row>
							{{ item.title }}
						</el-row>
					</div>
				</el-col>
			</el-row>

			<el-row :gutter="24" class="card_block">
				<el-row :gutter="24" style="text-align: left;padding: 5pt;">
					<el-col :span="24">
						<h3>我的工单</h3>
					</el-col>
				</el-row>

				<el-row :gutter="24">
					<el-col :span="8" style="padding: 10pt;" v-for="item in tool_list">
						<div class="icon-button" style="height: 70pt;" @click="onClickTools(item.url, item.type)">
							<el-row>
								<i :class="item.icon"></i>
							</el-row>
							<el-row>
								{{ item.title }}
							</el-row>
						</div>
					</el-col>
				</el-row>
			</el-row>


			<el-row :gutter="24" class="card_block">
				<el-row :gutter="24" style="text-align: left;padding: 5pt;">
					<el-col :span="24">
						<div>
							<h3>常用功能</h3>
						</div>
					</el-col>
				</el-row>

				<el-row :gutter="24">
					<el-col :span="8" style="padding: 20pt;" v-for="item in date_list">
						<div class="icon-button" @click="onClickDate(item.id)">
							<el-row>
								<i :class="item.icon"></i>
							</el-row>
							<el-row>
								{{ item.title }}
							</el-row>
						</div>
					</el-col>
				</el-row>
			</el-row>

		</el-main>

	</el-container>
</template>

<script>
import Api from '../../../api/api';
export default {
	data() {
		return {
			user:{},
			statistics_dates: [{
				title: '本月完成',
				value: 0
			},
			{
				title: '总完成数',
				value: 0
			}
			],
			tool_list: [
				//enum(//0待指派 1待接单 2待完成 3已完成 4未完成)	工单状态 
				{
					title: '已完成',
					icon: 'el-icon-edit',
					url: '/pages/tabbar/orders/orders?status=3&member_id=uid',
					type: 1
				},
				{
					title: '进行中',
					icon: 'el-icon-s-promotion',
					url: '/pages/tabbar/orders/orders?status=2&member_id=uid',
					type: 1
				},
				{
					title: '待接单',
					icon: 'el-icon-s-order',
					url: '/pages/tabbar/orders/orders?status=1&member_id=uid',
					type: 1
				},
				{
					title: '我的指派',
					icon: 'el-icon-s-order',
					url: '/pages/tabbar/orders/orders?assignee_id=uid',
					type: 1
				},
				{
					title: '我的报修',
					icon: 'el-icon-s-order',
					url: '/pages/tabbar/orders/orders?publisher_id=uid',
					type: 1
				}
			],
			date_list: [
				{
					title: '保养日历',
					icon: 'el-icon-edit',
					id: 0
				},
				{
					title: '巡检日历',
					icon: 'el-icon-s-promotion',
					id: 1
				},
				{
					title: '意见反馈',
					icon: 'el-icon-s-promotion',
					id: 2
				},
				{
					title: '关于我们',
					icon: 'el-icon-s-promotion',
					id: 3
				},
				{
					title: '退出登陆',
					icon: 'el-icon-s-promotion',
					id: 4
				}
			],
			title: 'Hello'
		};
	},
	methods: {
		onLoad() {
			this.user = uni.getStorageSync('user');
			for(let index=0;index<this.tool_list.length;index++)
			{
				this.tool_list[index].url = this.tool_list[index].url.replace('uid',`${this.user._id}`)
				console.log(this.tool_list[index].url)
			}
			Api.getMinepageStatistics({user_id:this.user._id}).then(response => {
				if(response.status==200)
				{
					this.statistics_dates = response.data.data
				}
				console.log(response.data.data)
			})
		},
		onClickTools(url, type) {
			console.log(url, type)
			if (type == 0) {
				uni.reLaunch({
					url: url
				})
			} else {
				uni.navigateTo({
					url: url
				})
			}
		},
		onClickDate(id) {
			switch (id) {
				case 4: {
					console.log("退出")
					this.user.token = ""
					uni.setStorageSync('user',this.user);
					Api.setToken("")
					uni.navigateTo({ url: '../../login/login' })
					break
				}
				default: {
					this.$message.success("暂不开放");
					break
				}
			}
		}
	}
};
</script>

<style>
.content {
	text-align: center;
	height: 100%;
}

.card_block {
	text-align: center;
	background-color: white;
	margin-bottom: 5pt;
	border-radius: 5pt;
}

.el-col {
	border-radius: 4px;
}

.bg-purple-dark {
	background: #99a9bf;
}

.bg-purple {
	background: #d3dce6;
}

.bg-purple-light {
	background: #e5e9f2;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
}

.icon-button {
	background-color: white;
	border-radius: 4px;
	padding: 5pt;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.bg-page {
	text-align: center;
	background: #f5f5f5;
	padding: 0px;
	margin: 0px;
	height: 90vh;
}
</style>
